<template>
	<view>
		<view class="bg" style="height:350rpx">
			<view class="container">
				<view class="title">{{detail.song}}</view>
			</view>
		</view>
		<!-- 图片 -->
		<view class="photo" @tap="preview">
			<image :src="detail.photo"></image>
		</view>
		<!-- 底部 -->
		<view class="icon">
			<view class="zan" @tap="shoucang">
				<view>
					<image :src="selected?'/static/img/shoucang2.png':'/static/img/shoucang.png'"></image>
					<text>收藏</text>
				</view>
			</view>
			<view class="share">
				<view>
					<view class="share-btn">
						<image src="/static/img/share.png"></image><text>分享</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: [],
				selected: false,
				id: ''
			}
		},
		methods: {
			 // 预览大图
			    preview() {
			        let that = this
			        uni.previewImage({
			            urls: [that.detail.photo],
			        })
			    },
			shoucang() {
				
				// 要登陆后才能实现收藏
				if (JSON.parse(uni.getStorageSync('info'))["openid"]) {
					this.selected = !this.selected
					let id = this.id
					let which = uni.getStorageSync('which')
					let isCate = (which == 'category') ? true : false
					let openId = JSON.parse(uni.getStorageSync('info'))["openid"]
					if (this.selected) {
						// 被选中
						// 将歌曲id上传到数据库
						this.$request({
							url: '/user/shoucang',
							data: {
								id,
								openId,
								isCate
							}
						})
					} else {
						// 取消选中
						// 将歌曲id从数据库中删除
						this.$request({
							url: '/user/cancleShoucang',
							data: {
								id,
								openId,
								isCate
							}
						})
					}
				} else {
					uni.showToast({
						title: '请先登录哦',
						icon: 'none'
					})
				}
			},
			async getDetail() {
				let which = uni.getStorageSync('which')
				let ret = await this.$request({
					url: `/${which}/detail?id=${this.id}`
				})
				this.detail = ret[0]
				let openId = JSON.parse(uni.getStorageSync('info'))["openid"]
				let isShoucang = await this.$request({
					url: '/user/oneshoucang',
					data: {
						id: this.id,
						openId,
						isCate: which == 'category' ? true : false
					}
				})
				this.selected = isShoucang.length ? true : false
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getDetail()
		}
	}
</script>

<style>
	.container {
		width: 80%;
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}

	.title {
		font-size: 46rpx;
		margin-bottom: 40rpx;
	}

	.icon {
		width: 100%;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0
	}

	.icon>view {
		border-top: 2rpx solid #e8e8e8;
		line-height: 100rpx;
		width: 50%;
		color: #333;
		background-color: #fff;
	}

	.icon>view+view {
		border-left: 2rpx solid #e8e8e8;
	}

	.share-btn {
		background-color: #fff;
		font-weight: normal;
		color: #333;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		line-height: 100rpx;
		border: 0 solid #fff;
	}

	.icon>view>view {
		text-align: center;
	}

	.icon image {
		width: 60rpx;
		height: 60rpx;
		vertical-align: middle;
		margin-right: 10rpx
	}

	.photo {
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.photo image {
		width: 100%;
		height: 1058rpx;
	}
</style>
